<template>
  <div class="asset-collect-container">
    <CellTitle title="资产披露汇总" />
    <div>
      <a-tabs default-active-key="1" @change="selectTab">
        <a-tab-pane key="1" title="外购数据"></a-tab-pane>
        <a-tab-pane key="2" title="研发数据"></a-tab-pane>
        <a-tab-pane key="3" title="其他方式"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="collect-desc-content">
      <div class="collect-desc-item">
        <p class="collect-desc-item-title">账面原值</p>
        <a-descriptions :data="data1" :column="2" layout="inline-horizontal" />
      </div>
      <div class="collect-desc-item">
        <p class="collect-desc-item-title">累计摊销</p>
        <a-descriptions :data="data2" :column="2" layout="inline-horizontal" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CellTitle from '@/views/resource_ledger/components/CellTitle.vue';

const selectTab = (value: string | number) => {
  console.log(value);
};

const data1 = [
  {
    label: '期初余额：',
    value: '￥0'
  },
  {
    label: '期末余额：',
    value: '￥0'
  },
  {
    label: '本期增加金额：',
    value: '￥0'
  },
  {
    label: '本期减少金额：',
    value: '￥0'
  },
  {
    label: '购入：',
    value: '￥0'
  },
  {
    label: '内部研发：',
    value: '￥0'
  },
  {
    label: '其他增加：',
    value: '￥0'
  },
  {
    label: '处置：',
    value: '￥0'
  },
  {
    label: '失效且终止确认：',
    value: '￥0'
  },
  {
    label: '其他减少：',
    value: '￥0'
  },
 
];
const data2 = [
  {
    label: '期初余额：',
    value: '￥0'
  },
  {
    label: '期末余额：',
    value: '￥0'
  },
  {
    label: '本期增加金额：',
    value: '￥0'
  },
  {
    label: '本期减少金额：',
    value: '￥0'
  },
  {
    label: '处置：',
    value: '￥0'
  },
  {
    label: '失效且终止确认：',
    value: '￥0'
  },
  {
    label: '其他减少：',
    value: '￥0'
  },
 
];
</script>
<style lang="less" scoped>
.asset-collect-container {
  // padding: 0 24px;
}
.collect-desc-content {
  display: flex;
}
.collect-desc-item {
  flex: 1;
  padding: 20px 20px;
  background-color: #f7f9fc;
  border-radius: 8px;
  margin-right: 20px;
  &:last-child {
    margin-right: 0;
  }
}

.collect-desc-item-title {
  font-weight: 700;
  font-size: 16px;
  color: #465a80;
  margin-bottom: 16px;
}

::v-deep{
  .arco-descriptions-item{
    line-height: 2.3;
  }
  .arco-descriptions-item-label{
    color: #A3B0CC;
    font-size: 14px;
  }
  .arco-descriptions-item-value{
    color: #465A80;
    font-size: 14px;
  }
  // .arco-descriptions-row{
  //   padding-bottom: 10px !important;
  // }

  // table tbody tr {
  //   display: block;
  //   margin-bottom: 10px;
  // }
}
</style>
